坑洞知識(二)

ES6 與 create-react-class 開發方式選擇

基本上開發時使用哪一種沒甚麼太大差異，大多數都是看自己團隊內後續的Coding standard，
ES6 class 與 createReactClass() 的 API 十分相似，但還是要注意他們之間不同的地方

1. 宣告預設 Props
function 與 ES6 class 語法時，defaultProps 會被定義為 component 上的一個屬性

class Guest extends React.Component {
 //...
}
Guest.defaultProps = {title:'Pothole'}

而使用 createReactClass() 語法時，你則需要在傳遞的物件上定義 getDefaultProps() 方法：

var Guest = createReactClass({
    getDefaultProps: function(){
        return {title:'Pothole'}
    },
    //....
})

2. 設定初始 State
ES6 class中，藉由constructoo設定this.state來定義初始state

class Guest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {ac: props.acInfo};
  }
  // ...
}

createReactClass() 語法則需要另外提供一個會回傳初始state的getInitialState

var Guest = createReactClass({
  getInitialState: function() {
    return {ac: this.props.acInfo};
  },
  // ...
});

3. 自動綁定
使用 ES6 class 宣告 React component 時，不會自動綁定this到instance上，
需要明確在constructor 中使用 .bind(this) 來綁定 this

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {message: 'Hello!'};
    // 這行很重要！
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert(this.state.message);
  }

  render() {
    // 因為 `this.handleClick` 已經被綁定了，所以我們才可以把它當作 event handler 使用。
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

使用 createReactClass() 時就不需要這麼做，因為它會自動綁定所有方法

var SayHello = createReactClass({
  getInitialState: function() {
    return {message: 'Hello!'};
  },

  handleClick: function() {
    alert(this.state.message);
  },

  render: function() {
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
});

為避免使用this時出錯，以下幾種方式可以選擇提醒自己

• 在 constructor 中綁定方法。
• 使用 arrow function，例如 onClick={(e) => this.handleClick(e)}。
• 繼續使用 createReactClass。

4. ES6 並沒有支援任何 mixin 語法。因此當你在 React 中使用 ES6 class 時也不支援使用 mixin。

明天繼續來，持續累積自己也持續找坑補洞